<template>
  <div id="work-time-component">
    <div class="container">
      <h2>Work Time Tracker</h2>
      <div class="form-group">
        <label>Start Time:</label>
        <a-time-picker v-model:value="startTime" format="HH:mm" />
      </div>
      
      <div class="form-group">
        <label>End Time:</label>
        <a-time-picker v-model:value="endTime" format="HH:mm" />
      </div>
      
      <div class="form-group">
        <label>Animation Speed:</label>
        <a-radio-group v-model:value="speedMode" button-style="solid">
          <a-radio-button value="realtime">Real-time</a-radio-button>
          <a-radio-button value="hourly">Hourly</a-radio-button>
          <a-radio-button value="accelerated">Accelerated</a-radio-button>
        </a-radio-group>
      </div>
      
      <div class="form-group">
        <a-button type="primary" @click="submitWorkTime" :disabled="!startTime || !endTime">Submit</a-button>
      </div>
      
      <div class="info-section">
        <h3>Animation Speed Options</h3>
        <ul>
          <li><strong>Real-time:</strong> Animation moves based on actual work time (may be slow for long durations)</li>
          <li><strong>Hourly:</strong> Animation completes in 1 hour regardless of work duration</li>
          <li><strong>Accelerated:</strong> Animation completes in 5 minutes regardless of work duration</li>
        </ul>
      </div>
      
      <div class="result" v-if="resultMessage">
        <a-alert :message="resultMessage" type="success" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ipcApiRoute } from '@/api';
import { ipc } from '@/utils/ipcRenderer';
import type { Dayjs } from 'dayjs';

const startTime = ref<Dayjs | null>(null);
const endTime = ref<Dayjs | null>(null);
const speedMode = ref<'realtime' | 'hourly' | 'accelerated'>('realtime');
const resultMessage = ref('');

const submitWorkTime = () => {
  if (!startTime.value || !endTime.value) {
    resultMessage.value = 'Please select both start and end times';
    return;
  }

  // Format times as strings
  const start = startTime.value.format('HH:mm');
  const end = endTime.value.format('HH:mm');

  // Get current time to calculate elapsed time
  const now = new Date();
  const currentDate = now.toISOString().split('T')[0]; // YYYY-MM-DD
  
  // Create full datetime strings for calculation
  const startDateTime = new Date(`${currentDate}T${start}:00`);
  const endDateTime = new Date(`${currentDate}T${end}:00`);
  
  // Handle case where end time is next day
  if (endDateTime < startDateTime) {
    endDateTime.setDate(endDateTime.getDate() + 1);
  }
  
  // Calculate total duration in milliseconds
  const totalDurationMs = endDateTime.getTime() - startDateTime.getTime();
  
  // Calculate elapsed time if start time has already passed
  let elapsedMs = 0;
  if (now > startDateTime) {
    elapsedMs = now.getTime() - startDateTime.getTime();
  }
  
  // If work time has already ended, show a message
  if (now > endDateTime) {
    resultMessage.value = 'Work time has already ended';
    setTimeout(() => {
      resultMessage.value = '';
    }, 3000);
    return;
  }

  // Show the animated GIF with time information
  ipc.invoke(ipcApiRoute.effect.showWorkTimeGif, { 
    startTime: start, 
    endTime: end,
    startDateTime: startDateTime.getTime(),
    endDateTime: endDateTime.getTime(),
    totalDurationMs: totalDurationMs,
    elapsedMs: elapsedMs,
    speedMode: speedMode.value
  });
  
  resultMessage.value = `Work time set from ${start} to ${end}. ${speedMode.value} animation displayed.`;
  
  // Clear message after 3 seconds
  setTimeout(() => {
    resultMessage.value = '';
  }, 3000);
};
</script>

<style lang="less" scoped>
#work-time-component {
  padding: 20px;
  text-align: center;
  width: 100%;
  
  .container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  h2 {
    margin-bottom: 24px;
    color: #333;
  }
  
  .form-group {
    margin-bottom: 20px;
    text-align: left;
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #555;
    }
  }
  
  .info-section {
    background-color: #f0f8ff;
    border-left: 4px solid #1890ff;
    padding: 12px;
    margin: 20px 0;
    text-align: left;
    
    h3 {
      margin-top: 0;
      color: #1890ff;
    }
    
    ul {
      margin: 8px 0;
      padding-left: 18px;
      
      li {
        margin-bottom: 6px;
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  .result {
    margin-top: 20px;
  }
}
</style>